<template>
  <view class="container">
    <view class="goods-details" v-if="content">
      <rich-text :nodes="content" :data-nodes="content" @click="showImg($event)"></rich-text>
    </view>
  </view>
</template>

<script>
import htmlParser from "@/common/js/html-parser";
export default {
  data() {
    return {
      isIphoneX: false, //判断手机是否是iphoneX以上
      content: "",
    };
  },
  onLoad(data) {
    this.isIphoneX = this.$util.uniappIsIPhoneX();
    this.id = data.id;
    this.getDeliverScope();
  },
  methods: {
    getDeliverScope() {
      this.$api.sendRequest({
        url: "/api/canteen/explain",
        data: {
          canteen_id: this.id,
        },
        success: (res) => {
          if (res.code == 0) {
            // 商品详情
            if (res.data.explain) this.content = htmlParser(res.data.explain);
          } else {
            this.$util.showToast({ title: res.message });
          }
        },
      });
    },
    showImg(e) {
      //拿到图片的路径里面的内容放在我们数组中
      let contentimg = e.target.dataset.nodes;
      let arrImg = [];
      for (var i = 0; i < contentimg.length; i++) {
        var img = contentimg[i].children;
        if (Array.isArray(img)) {
          for (var j = 0; j < img.length; j++) {
            if (img[j].attrs && img[j].name == "img") {
              if (img[j].attrs.src) {
                arrImg.push(img[j].attrs.src);
              }
            }
          }
        }
      }
      //最后一步就是把我们的所有图片放在预览的api中就可以了
      uni.previewImage({
        current: arrImg,
        urls: arrImg,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 0;
}
</style>
